<template>
  <div class="index-page">

    <xdh-map :zoom="15" :center="mapCenter" type="Amap" ref="testMap"  @ready="mapInit" :layer-config="layerConfig" :min-zoom="15">
      <!-- <xdh-map-geo v-if="state" ref="geo" :state="state" :draw-define="drawDefineFn" @click="areaClick"></xdh-map-geo>  -->
 
      <xdh-map-geo v-if="geoState" ref="geo" :state="geoState" :draw-define="drawDefineFn" @click="areaClick"></xdh-map-geo>
    </xdh-map>
  </div>

</template>

<script>
// import macau from '../../public/geo/test.json'
import {parseStyle} from 'xdh-map'
import {mapState} from 'vuex'
import axios from '@/utils/axios'
// import { transform, WGS84, GCJ02 } from 'gcoord'
const DEPLOY_URL = window.__config__.DEPLOY_URL
// const MAP_SERVER = window.__config__.MAP_HOST
const GEOJSON_NAME = window.__config__.GEOJSON_NAME_1
const API_HOST = window.__config__.API_HOST
const Style = function(obj) {
  let isAllEvacuate
  let leftCount
  if (!obj.properties.data) {
    isAllEvacuate = true
    leftCount = 0
  } else {
    isAllEvacuate = obj.properties.data.evacuated === obj.properties.data.total
    leftCount = obj.properties.data.total - obj.properties.data.evacuated
  }
  
  return parseStyle({
    className: 'Style',
    fill: {
      className: 'Fill',
      color: isAllEvacuate ? 'skyblue' : 'yellow'
    },
    stroke: {
      className: 'Stroke',
      lineDash: [5, 5],
      color: 'white',
      width: 1
    },
    text: {
      className: 'Text',
      text: isAllEvacuate ? obj.properties.areaName + '\n' + '全部撤离' : obj.properties.areaName + '\n' + `未撤离: ${leftCount}户`,
      font: '14px sans-serif',
      stroke: {
        className: 'Stroke',
        width: 0,
        color: 'white'
      },
      fill: {
        className: 'Fill',
        color: 'red'
      }
    }
  })
}

export default {
  data() {
    return {
      olMap: null,
      viewer: null,
      state: null, // macau,
      geoState: null,
      layerConfig: {
        Amap: {
          title: '高得地图',
          server: '' // MAP_SERVER
        }
      },
      mapCenter: [113.5472566772461, 22.18401015625],
      
      popups: [], 
      areaCount: [], // 
      res: ''
    }
  },
  computed: {
    ...mapState({
      authorKey: 'authorKey'
    })
  },
  watch: {
    authorKey(val) {
      if (val) {
        this.fetchMapData()
      }
    }
  },
  methods: {
      
    areaClick(data, e, feature) {
      let nowZoom = this.viewer.getZoom() + 1
      let zoom = nowZoom >= 18 ? 18 : nowZoom
      this.viewer.animate({
        center: feature.getGeometry().getInteriorPoint().getCoordinates(),
        duration: 500,
        zoom: zoom
      })
      
      if (window.JSInterface) {
        if (!this.areaCount.length) return
        let targetArea = JSON.stringify(this.areaCount.find((item) => { return item.areaId === data.properties.areaId }))
        window.JSInterface.htmlMapClick(targetArea)
      }
    },
    mapInit(map, vm) {
      this.olMap = map
      this.viewer = this.olMap.getView()
    },
    drawDefineFn(feature, obj) {
      let center = feature.getGeometry().getInteriorPoint()
      this.popups.push({
        point: center.getCoordinates(),
        properties: obj.properties,
        data: null
      })
      feature.setStyle(Style(obj))
    },
    fetchMapData() { // 调取接口函数
      axios({
        methods: 'get',
        url: API_HOST + '/api/v1/commander/statistics',
        headers: {
          Authorization: this.authorKey
        }
      }).then((res) => { console.log(res) }).catch((err) => {
        // console.log(res)
        // if (!res.data || res.data.status !== 0) return
        // let result = res.data.data
        console.log(err)
        let result = { areaCount: [
         {
          areaId: 'C1',
          areaName: 'C1',
          total: 50,
          evacuated: 23
         },
         {
          areaId: 'C2',
          areaName: 'C2',
          total: 50,
          evacuated: 44
         },
         {
          areaId: 'C3',
          areaName: 'C3',
          total: 50,
          evacuated: 50
         }
        ] }
         
        this.areaCount = result.areaCount 

        let obj = {...this.state}
        result.areaCount.forEach((item, index) => {
          let targetFeature = obj.features.find((feature) => {
            return feature.properties.areaId === item.areaId
          })
          targetFeature.properties.data = item 
        })
          
        this.geoState = obj
        console.log(this.geoState)
      })
    },
    fetchGeoJson() {
      return axios({
        methods: 'get',
        url: DEPLOY_URL + '/geo/' + GEOJSON_NAME
      }).then((res) => {
        let state = res.data // transform(res.data, WGS84, GCJ02)
        return Promise.resolve(state)
      })
    }
  },
  mounted() {
    // this.fetchGeoJson().then((state) => {
    //   this.state = state
    //   this.fetchMapData()
    // })
   
  }
}
</script>

<style scoped lang="scss">
  .index-page {
    // width: 100%;
    height: 100%;
    background: #f5f5f5;
    // border: 1px solid red;
    .xdh-map-tooltip.test-map-tooltip.is-light{
      color: white;
      background: #44A4F8;
      &::after{
          border-top: 12px solid #44A4F8;
      }
      /deep/ .xdh-map-popup__body{
        padding: 0;
      }
    }
  }
</style>
